<template>
  <div class="hello" style="min-width: 1366px;">
        <!--header-->
        <el-row>
           <el-col :span='2' :offset="2" >
                <img style="width:120px;heigth:120px;border-radius: 50%;margin-top: 5px;" src="/static/logo.png" />
           </el-col>
            <el-col :span='3' :offset="1" class="title">
              <span style="font-weight: bolder;">力点户外</span>
           </el-col>
           <el-col :span="2" :offset="4" >
             <el-popover
              ref="popover1"
              placement="bottom"
              trigger="hover"
              width="160"
              v-model="visible">
              <img style="width:160px;height:160px;" src="/static/erweima.jpg" alt="">
            </el-popover>
            <img v-popover:popover1  style="width:130px;heigth:114px;" src="/static/weixin.jpg" alt="">
           </el-col>
            <el-col :span="1" :offset="1">
              <img style="width:130px;heigth:114px;" src="/static/weibo.jpg" alt="">
           </el-col>
            <el-col :span='1' :offset="2">
              <img style="padding-top:28px;" src="/static/phone.jpg" alt="" >
           </el-col>
           <el-col :span='5' style="margin-top:5px;">
               <h3>热线电话</h3>
               <h1>0512-52502353</h1>
           </el-col>
        </el-row>
        <!-- menu -->
        <el-menu
            :router='isrouter'
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">
          <el-menu-item style="font-size: 18px;" index="/advantagePage">首页</el-menu-item>
          <el-menu-item style="font-size: 18px;" index="/about">关于力点</el-menu-item>
          <el-menu-item style="font-size: 18px;" index="3">品牌项目</el-menu-item>
          <el-menu-item style="font-size: 18px;" index="4">公司动态</el-menu-item>
          <el-menu-item style="font-size: 18px;" index="/aboutBase">拓展基地</el-menu-item>
          <el-menu-item style="font-size: 18px;" index="/teamPage">师资团队</el-menu-item>
          <el-menu-item style="font-size: 18px;" index="7">服务客户</el-menu-item>
          <el-menu-item style="font-size: 18px;" index="/security">安全保障</el-menu-item>
          <el-menu-item style="font-size: 18px;" index="/bookOnline">在线预约</el-menu-item>
          <el-menu-item style="font-size: 18px;" index="/connect">联系我们</el-menu-item>
        </el-menu>
         <!-- banner -->
        <el-carousel :interval="3000"  height="400px" style="margin-top:20px;">
            <el-carousel-item v-for="item in banners" :key="item.bg">
              <img  v-bind:src="['static/'+item.bg]">
            </el-carousel-item>
        </el-carousel>
        <router-view></router-view>
    <!--联系我们-->
    <el-row style="margin-top: 20px;">
      <el-col :span="24">
        <div style="width: 100%;height: 300px;background-color: rgb(84, 92, 100);color: white;">
          <el-row>
            <el-col :span="3" :offset="4" style="margin-top: 6%;">
              <img  src="static/erweima.jpg" alt="">
            </el-col>
            <el-col :span="8" style="margin-top: 6%;" :offset="1">
              <i class="el-icon-message">传真:0512-52502353</i>
              <br>
              <br>
              <i class="el-icon-phone">值班电话:13812835754</i>
              <br>
              <br>
              <i class="el-icon-mobile-phone">服务热线:0512-52502353</i>
              <br>
              <br>
              <i class="el-icon-location">地址:江苏省常熟市蒋巷村生态园</i>
              <br>
              <br>
              <p >版权所有·力点户外体验式培训同盟(苏州)有限公司</p>
            </el-col>
            <el-col :span="7" style="margin-top: 20px;">
              <iframe src="static/map.html" width="100%" height="230" frameborder="0" scrolling="no"></iframe>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      isrouter: true,
      activeIndex:'1',
      visible:false,
      banners:[
        {'bg':'1.jpg'},
        {'bg':'2.jpg'},
        {'bg':'3.jpg'},
        {'bg':'4.jpg'},
        {'bg':'5.jpg'},
        {'bg':'6.jpg'},
      ]
    };
  },
  mounted:function(){
    //this.$router.push({path:'/advantagePage'});
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin-top: 17px;
  margin-bottom: 0px;
}
h1 {
  margin-top: 0px;
}
.title {
  color: darkslateblue;
  font-size: 40px;
  padding-top: 23px;
}
.el-popper[x-placement^="bottom"] {
  margin-top: 0px;
}
.el-menu--horizontal .el-menu-item{
  margin-left: 1.5%;
}
</style>
